/*
 * @Author: hanyu
 * @Date: 2018-05-07 09:46:58 
 * @Last Modified by: hy
 * @Last Modified time: 2018-07-31 15:59:29
 */
<template>
    <div>
      <chart :noData="noData" :chartStyle="chartStyle ? chartStyle : 'min-height:230px;height:230px'" :option="dataOption"/>
    </div>
</template>
<script>
import chart from "@/components/Charts/newChart";
import _ from "lodash";
/*
单个line图表
value:[{
    name:'',
    value:'',
}]
option:{ //echart 的 option
    legendArr:['',''] //如果有legend ,按照顺序传入 legend 名字
    color:'',//线条颜色
    startColor:'',渐变色
    endColor:'',渐变色
    unit: 单位
    showLabel: false .// 是否显示 label
    lineIconId:0,//线上的圈 base64img
    sumName:'',//toolTip上  每个x 单位 总合名称
}
*/
var n = 0;
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    chartStyle: {
      type: String, // 自定义图表宽高
      default: () => {
        return "";
      }
    }
  },
  components: {
    chart
  },
  data() {
    return {
      dataOption: {},
      noData: false,
      time: null
    };
  },
  watch: {
    value(newValue, oldValue) {
      if (newValue.length === 0) {
        this.$set(this, "noData", true);
      } else {
        this.$set(this, "noData", false);
        this.setOption(newValue);
        this.time = setInterval(() => {
          this.setOption(newValue);
        }, 6000);
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.time);
  },
  methods: {
    setOption(res) {
      var xdata = [];
      if (n > res.length - 1) {
        n = 0;
      }
      var resData = res[n];
      var data0 = [];
      var linData0 = [];
      var linData1 = [];
      // 商城价
      var obj = {
        name: resData.name,
        value: resData.marketPriceList[resData.marketPriceList.length - 1].price
      }
      this.$emit("name", obj)
      resData.mallPriceList.forEach(mallItem => {
        xdata.push(mallItem.date);
        linData1.push(mallItem.price);
        data0.push([
          mallItem.price,
          mallItem.price - mallItem.priceDiff,
          mallItem.price + 30,
          mallItem.price - mallItem.priceDiff - 30
        ]);
      });
      // 网价
      resData.marketPriceList.forEach(marketItem => {
        linData0.push(marketItem.price);
      });
      // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
      var option = {
        background: "transparent",
        openDataZoom: true,
        legend: {
          data: [
            {
              name: "商城现价",
              textStyle: {
                color: "#28E787",
                fontSize: 14
              },
              right: 0
            },
            {
              name: "网价",
              textStyle: {
                color: "#28E787",
                fontSize: 14,
                padding: [0, 10]
              }
            }
          ],
          right: 0
        },
        grid: {
          left: "10%",
          right: "10",
          bottom: "15%"
        },
        tooltip: {
          show: false
        },
        xAxis: {
          type: "category",
          data: xdata,
          nameTextStyle: {
            color: "red"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40, 231, 135, 0.5)"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            rotate: 0,
            interval: 6,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            },
            rich: {
              // x轴富文本样式
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          }
        },
        yAxis: {
          name: "",
          scale: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40, 231, 135, 0.5)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          }
        },
        series: [
          {
            name: "",
            type: "candlestick",
            data: data0,
            barWidth: 10,
            itemStyle: {
              color: "#00D1FF",
              color0: "#F0BD26",
              borderColor: "#00D1FF",
              borderColor0: "#F0BD26"
            },
            markPoint: {
              label: {
                normal: {
                  formatter: function(param) {
                    return param != null ? Math.round(param.value) : "";
                  }
                }
              },
              data: [],
              tooltip: {
                formatter: function(param) {
                  return param.name + "<br>" + (param.data.coord || "");
                }
              }
            }
          },
          {
            name: "商城现价",
            type: "line",
            data: linData1,
            smooth: true,
            symbol: "none",
            itemStyle: {
              color: "#00D1FF"
            }
          },
          {
            name: "网价",
            type: "line",
            data: linData0,
            smooth: true,
            symbol: "none",
            itemStyle: {
              color: "#F0BD26"
            }
          }
        ]
      };
      var allOption = _.merge(option, this.option);
      this.$set(this, "dataOption", allOption);
      n++;
    }
  }
};
</script>

<style scoped>
.noData {
  color: white;
  text-align: center;
  font-size: 20px;
  margin-top: 50px;
}
</style>